<template>
  <Card class="!mt-10px"><div class="w-full h-500px" ref="chartRef"></div></Card>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  export default defineComponent({
    name: 'PieChart',
  });
</script>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { Card } from 'ant-design-vue';

  import { useECharts } from '/@/hooks/web/useECharts';
  // import 'echarts/extension/bmap/bmap';
  import china from './china.json';
  import data from './data.json';

  const chartRef = ref();
  const { setOptions, echarts } = useECharts(chartRef);

  echarts.registerMap('china', china);

  const result = data.features.map((item) => {
    return {
      name: item.properties.name,
      value: item.properties['累计确诊'],
    };
  });
  // console.log(result);

  onMounted(() => {
    const option = {
      series: [
        {
          name: '全国疫情确诊人数',
          type: 'map',
          map: 'china',
          roam: false, // 是否可以缩放
          zoom: 1.23, // 地图缩放
          label: {
            show: true,
          },
          itemStyle: {
            emphasis: {
              label: {
                fontSize: 20,
              },
              areaColor: '#ec4899',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 10,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
          data: result,
        },
      ],
      tooltip: {},
      visualMap: {
        type: 'piecewise',
        splitNumber: 5,
        pieces: [
          { min: 0, max: 999 },
          { min: 1000, max: 3999 },
          { min: 4000, max: 6999 },
          { min: 7000, max: 9999 },
          { min: 10000 },
        ],
      },
    };
    setOptions(option);
  });
</script>
